<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">


			<!-- 内容 -->
			<div class="main">
				<div class="contentBox">
					<div class="title mb-12">年龄</div>
					<div class="flex-box">
						<div v-for="(item, index) in ageList" :key="index" class="item"
							:class="ageIndex === index ? 'active' : ''" @click="select(item, index, 'age')">
							{{ item.label }}
						</div>
					</div>
					<div class="title mb-12 mt-60">性别</div>
					<div class="flex-box">
						<div v-for="(item, index) in sexList" :key="index" class="item"
							:class="sexIndex === index ? 'active' : ''" @click="select(item, index, 'sex')">
							{{ item.label }}
						</div>
					</div>
					<div class="title mb-12 mt-60">经验要求</div>
					<div class="flex-box">
						<div v-for="(item, index) in experienceList" :key="index" class="item"
							:class="experienceIndex === index ? 'active' : ''"
							@click="select(item, index, 'experience')">
							{{ item.label }}
						</div>
					</div>

					<div class="title mb-12 mt-60">学历要求</div>
					<div class="flex-box">
						<div v-for="(item, index) in educationList" :key="index" class="item"
							:class="eduIndex === index ? 'active' : ''" @click="select(item, index, 'edu')">
							{{ item.label }}
						</div>
					</div>
					<div class="title mb-12 mt-60">薪资待遇</div>
					<div class="flex-box">
						<div v-for="(item, index) in PriceList" :key="index" class="item"
							:class="priceIndex === index ? 'active' : ''" @click="select(item, index, 'price')">
							{{ item.label }}
						</div>
					</div>
					<div class="title mb-12 mt-60">求职状态</div>
					<div class="flex-box">
						<div v-for="(item, index) in jobSeekList" :key="index" class="item"
							:class="jobSeekIndex === index ? 'active' : ''" @click="select(item, index, 'jobSeek')">
							{{ item.label }}
						</div>
					</div>
					<!-- 行业 -->
					<div class="mb-12 mt-60 flex align-center">
						<div class=" title">专业</div>
						<div class="ml-auto color-6 fontS20" @click="toMore">更多</div>
					</div>

					<div class=" flex-box">
						<div v-for="(item, index) in typeList" :key="index" class="item text-cut1 fontE11"
							:class="typeIndex === index ? 'active' : ''" @click="select(item, index, 'type')">
							{{ item.majorName }}
						</div>
					</div>

				</div>
			</div>
			<!-- 职业列表 -->
			<div class="profession-cover" v-if="majorStatus" @click="majorStatus = false"></div>
			<div class="profession-box flex" v-if="majorStatus">
				<div class="profession-left">
					<scroll-view style="height:600upx" scroll-y>
						<div v-for="(item, index) in majorList" :key="index"
							:class="majorIndex === index ? 'active' : ''" @click="changeTab(item, index)">
							{{ item.majorName }}
						</div>
					</scroll-view>
				</div>
				<div class="profession-right">
					<scroll-view style="height:600upx" scroll-y>
						<div v-for="(item, index) in majorList[majorIndex].children" :key="index"
							@click="selectItem(item)">
							{{ item.majorName }}
						</div>
					</scroll-view>
				</div>
			</div>
			<div class="bottom flex align-center">
				<div class="ml-auto flex">
					<div class="bottomBtnCancle fontS26" @click="cancleBtn">
						<div>清除</div>
					</div>
					<div class="bottomBtnConfirm fontS26 ml-20" @click="confirmBtn">
						<div>确认</div>
					</div>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
const App = getApp().globalData;

import {

	findAllIndustryType,
	allMajorList,

} from "@/api/index";

import { majorTree } from '@/api/resume'
export default {
	data() {
		return {
			headerHeight: 0, // 用于存储头部高度
			baseUrl: getApp().globalData.baseUrl,

			isShowbar: false,
			isBack: false,
			serviceDetail: null,
			loading: true,


			custom: null,
			navTop: null,
			educationList: [],
			eduIndex: 0,
			PriceList: [],
			priceIndex: 0,

			experienceList: [],
			experienceIndex: 0,


			typeList: [],
			typeIndex: 0,
			majorStatus: false,
			majorList: [],
			majorIndex: 0,
			ageList: [
				{ label: '全部', value: '' },
				{ label: '35岁以下', value: 0 },
				{ label: '35岁以上', value: 1 },
			],
			ageIndex: 0,
			sexList: [
				{ label: '全部', value: '' },
				{ label: '男', value: 0 },
				{ label: '女', value: 1 },
			],
			sexIndex: 0,
			jobSeekList: [],
			jobSeekIndex: 0,
			filterParam: {
				"age": null,
				"educationList": [],
				"experienceRequireList": [],
				"jobSeekStatusList": [],
				"majorIds": [],
				"salary": null,
				"sex": null,
			}

		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},


	async onLoad(option) {
		let custom = wx.getMenuButtonBoundingClientRect()
		this.btnRight = uni.upx2px(30) + custom.width
		this.custom = custom
		this.navTop = custom.top - this.statusBarHeight

		await this.getTypeList()
		let _this = this;
		setTimeout(() => {
			_this.experienceList = [{ label: '全部', value: '' }, ...getApp().globalData.experience]
			_this.educationList = [{ label: '全部', value: '' }, ...getApp().globalData.education]
			_this.PriceList = [{ label: '全部', value: '' }, ...getApp().globalData.PriceList]
			_this.jobSeekList = [{ label: '全部', value: '' }, ...getApp().globalData.jobSeek]
			option.filterP = JSON.parse(option.filterP)
			console.log(option)
			if (option.filterP !== '{}') {
				if (option.filterP && option.filterP.educationList.length > 0) {
					_this.eduIndex = _this.educationList.findIndex(item => { return item.value === option.filterP.educationList[0] })
				}
				if (option.filterP && option.filterP.age !== null) {

					_this.ageIndex = _this.ageList.findIndex(item => { return item.value === option.filterP.age })

				}

				if (option.filterP && option.filterP.experienceRequireList.length > 0) {
					console.log('experienceRequireList')
					_this.experienceIndex = _this.experienceList.findIndex(item => { return item.value === option.filterP.experienceRequireList[0] })
				}

				if (option.filterP && option.filterP.jobSeekStatusList.length > 0) {

					_this.jobSeekIndex = _this.jobSeekList.findIndex(item => { return item.value === option.filterP.jobSeekStatusList[0] })
				}
				if (option.filterP && option.filterP.salary) {

					_this.priceIndex = _this.PriceList.findIndex(item => { return item.value === option.filterP.salary })
				}
				if (option.filterP && option.filterP.sex !== null) {

					_this.sexIndex = _this.sexList.findIndex(item => { return item.value === option.filterP.sex })
				}
			}

		}, 400);
		console.log(option, 'qwqwq')

	},
	methods: {
		// 选择
		async select(item, index, type) {
			if (type === 'edu') this.eduIndex = index
			if (type === 'price') this.priceIndex = index
			if (type === 'experience') this.experienceIndex = index
			if (type === 'age') this.ageIndex = index
			if (type === 'sex') this.sexIndex = index
			if (type === 'type') this.typeIndex = index
			if (type === 'jobSeek') this.jobSeekIndex = index

		},
		// 行业分类
		async getTypeList(id) {

			const {
				data
			} = await allMajorList();
			data.unshift({
				id: '',
				majorName: '全部'
			})
			this.typeList = data.slice(0, 15)

		},
		async getmajorTree() {
			const { data } = await majorTree()
			this.majorList = data
		},
		changeTab(item, index) {
			this.majorIndex = index
		},
		selectItem(item) {

			let result = this.typeList.findIndex(typeItem => typeItem.id === item.id)

			if (result !== -1) {
				this.typeIndex = result
			} else {
				this.typeList.pop();
				this.typeList.push(item)
				this.typeIndex = this.typeList.length - 1
			}

			this.majorStatus = false
		},
		countNonNullFields(obj) {
			if (!obj || typeof obj !== 'object') {
				return 0;
			}

			return Object.entries(obj).reduce((count, [key, value]) => {
				const isEmpty =
					value === null ||
					value === undefined ||
					value === "" ||
					(Array.isArray(value) && value.length === 0) ||
					(typeof value === 'object' && Object.keys(value).length === 0);

				return isEmpty ? count : count + 1;
			}, 0);
		},
		cancleBtn() {
			this.filterParam = {
				"age": null,
				"educationList": [],
				"experienceRequireList": [],
				"jobSeekStatusList": [],
				"majorIds": [],
				"salary": null,
				"sex": null,
			}
			this.eduIndex = 0
			this.experienceIndex = 0
			this.jobSeekIndex = 0
			this.ageIndex = 0
			this.priceIndex = 0
			this.sexIndex = 0
			this.typeIndex = 0
			uni.showToast({ title: '清除成功', icon: 'none' })

		},
		confirmBtn() {
			if (this.eduIndex !== 0) {
				this.filterParam.educationList = [this.educationList[this.eduIndex].value]
			}
			if (this.ageIndex !== 0) {
				this.filterParam.age = this.ageList[this.ageIndex].value
			}
			if (this.sexIndex !== 0) {
				this.filterParam.sex = this.sexList[this.sexIndex].value
			}
			if (this.experienceIndex !== 0) {
				this.filterParam.experienceRequireList = [this.experienceList[this.experienceIndex].value]
			}
			if (this.typeIndex !== 0) {
				this.filterParam.majorIds = [this.typeList[this.typeIndex].id]
			}
			if (this.priceIndex !== 0) {
				this.filterParam.salary = this.PriceList[this.priceIndex].value
			}
			if (this.jobSeekIndex !== 0) {
				this.filterParam.jobSeekStatusList = [this.jobSeekList[this.jobSeekIndex].value]
			}
			let pages = getCurrentPages(); //获取所有页面栈实例列表
			let nowPage = pages[pages.length - 1]; //当前页页面实例
			let prevPage = pages[pages.length - 2]; //上一页页面实例
			prevPage.$vm.filterParam = this.filterParam
			prevPage.$vm.filterParamNum = this.countNonNullFields(this.filterParam)
			uni.navigateBack({
				delta: 1
			})

		},
		async toMore() {
			await this.getmajorTree()
			this.majorStatus = true

		},

	},
};
</script>

<style lang="less" scoped>
page {
	background-color: #f7f7f7 !important;
}

.content {
	height: 100vh;
	overflow-y: auto;
	// background: #fff;

	padding-bottom: calc(constant(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS>11.2*/

}

.main {
	padding: 30upx;
}

.contentBox {

	// padding: 20rpx;
	.flex-box {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 16upx 26upx;
		/*  声明行的高度  */
		grid-template-rows: 72upx;

		line-height: 72upx;

		.item {
			text-align: center;
			// padding: 0 10upx;
			background: #F2F2F2;
			border-radius: 4px;
			border: 1px solid #F2F2F2;
			font-size: 24upx;
			color: #333333;

			&.active {
				background: #E9F8F0;
				border-radius: 4px;
				border: 1px solid #34AC6E;
				color: #37AF71;
			}
		}

	}
}

.title {
	font-weight: 500;
	font-size: 30upx;
	color: #111111;
	line-height: 48upx;

}

.profession-cover {
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .3);
	z-index: 888888;
}

.profession-box {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 600upx;
	background: #F7F7F7;
	position: fixed;
	z-index: 999999;

	.profession-left {
		width: 50%;
		text-align: center;
		background: #fff;


		div {
			line-height: 90upx;

			&.active {
				background: #F7F7F7;
			}

		}
	}

	.profession-right {
		background: #F7F7F7;
		width: 50%;
		padding-left: 20upx;

		div {
			line-height: 90upx;

		}

	}
}
</style>